<template>
<el-dialog
    class="roleDialog"
    title="分配角色"
    :visible="isAssignRole"
    @close="handleCancel"
>
    <p>为 <span class="name">{{ user.username }}</span> 分配角色：</p>
    <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="item in RoleList" :key="item.id" :label="item.id">
            {{ item.name }}
        </el-checkbox>
    </el-checkbox-group>
    <el-row
        type="flex"
        justify="center"
        align="middle"
        style="margin-top: 40px;"
    >
        <el-col :span="4" style="text-align:center"><el-button type="primary" @click="handleSubmit">确定</el-button></el-col>
        <el-col :span="4" style="text-align:center"><el-button @click="handleCancel">取消</el-button></el-col>
    </el-row>
</el-dialog>
</template>

<script>
import { getRoleList } from '@/api/setting.js'
import { getUserDetailById, setRoleForEmp } from '@/api/employees.js'
export default {
	props: {
		isAssignRole: {
			type: Boolean,
			required: true
		},
		/* 当前用户 */
		user: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			/* 角色列表 */
			RoleList: [],
			/* 选中列表 */
			checkedList: []
		}
	},
	created() {
		this.getRoleList()
	},
	methods: {
		/* 确认 */
		async handleSubmit() {
			await setRoleForEmp({ id: this.user.id, roleIds: this.checkedList })
			this.$message.success('已为该员工分配角色！')
			this.handleCancel()
		},
		/* 取消 */
		handleCancel() {
			this.$emit('update:isAssignRole', false)
		},
		/* 获取所有角色列表信息 */
		async getRoleList() {
			const { rows } = await getRoleList()
			this.RoleList = rows
			console.log(this.RoleList)
		},
		/* 获取当前用户信息 */
		async getUserDetail(id) {
			const { roleIds } = await getUserDetailById(id)
			this.checkedList = roleIds
		}
	}
}
</script>

<style lang="scss" scoped>
	.roleDialog{
		::v-deep .el-dialog__body{
			padding: 0px 20px;
			padding-bottom: 20px;
		}
		p{
			font-weight: bold;
			font-size: 12px;
			margin: 20px 0;
			.name{
				color: #2586fb;
				font-size: 18px;
			}
		}
		.el-checkbox-group{
			::v-deep.el-checkbox{
			}
			margin-top: 40px;
			display: flex;
			justify-content: space-evenly;
		}
	}
</style>
